import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <RequireAuth><Layout /></RequireAuth>,
		children: [
			{
				path: '/',
				element: <Suspense fallback={<>Загрузка...</>}><LazyMenu /></Suspense>
			},
			{
				path: '/cart',
				element: <Cart />
			},
			{
				path: 'product/:id',
				element: <Product />,
				errorElement: <>Ошибка загрузки</>,
				loader: async ({ params }) => {
					return defer({
						data: axios.get(`${API}/products/${params.id}`).then(data => data).catch((e) => e)
					});
					// const { data } = await axios.get(`${API}/products/${params.id}`);
					// return data;
				}
			}
		]
	},
	{
		path: '/auth',
		element: <AuthLayout />,
		children: [
			{
				path: 'login',
				element: <Login />
			},
			{
				path: 'register',
				element: <Register />
			}
		]
	},
	{
		path: '*',
		element: <ErrorPage />
	}
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
	<React.StrictMode>
		<Provider store={store}>
			<RouterProvider router={router} />
		</Provider>
	</React.StrictMode>
);
